﻿import React,{ useState } from "react";

function EventHandling(){
    const [headingText,setHeadingText] = useState("Hello");
    const [isMouseOver,seMouseOver ] = useState(false);

    function handleClick(){
        setHeadingText("Submitted");
    }
    function handleMouseOver(){
        setMouseOver(true);
    }
    function handleMouseOut(){
        setMouseOver(false);
    }
    return(
        <div className={"container"}>
            <h1>{headingText}</h1>
            <input type="text" placeholder={"What's your name?"}/>
            <button
                style={{ backgroundColor:isMouseOver?"black":"white"}}
                onClick={handleClick}
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
            >
                Submit
            </button>
        </div>
    )
}

export default EventHandling;
